<template>
  <view class="container">
    <!-- 头部菜单 -->
    <view class="order-tit">

      <text
        data-sts="0"
        :class="sts==0?'on':''"
        @tap="onStsTap"
      >
        处理中
      </text>
      <text
        data-sts="1"
        :class="sts==1?'on':''"
        @tap="onStsTap"
      >
        退款成功
      </text>
      <text
        data-sts="2"
        :class="sts==2?'on':''"
        @tap="onStsTap"
      >
        退款失败
      </text>

    </view>
    <!-- end 头部菜单 -->
    <view class="main">
     <view v-if="list.length==0" class="empty" >
        还没有任何相关订单
      </view>
      <!-- 订单列表 -->
      <block
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="prod-item">
          <view class="order-num" style="flex-wrap: wrap;">
            <view>订单编号：{{ item.orderNumber }}</view>
            <view>退款编号：{{ item.outRefundNo }}</view>
          </view>
                <view
                  class="item-cont"
                  :data-ordernum="item.orderNumber"
                  @tap="toOrderDetailPage"
                >
                  <view class="prod-pic">
                    <image :src="item.pic" />
                  </view>
                  <view class="prod-info">
                    <view class="prodname">
                      {{ item.prodName }}
                    </view>
                    <view class="price-nums">
                     <text class="prodcount" style="bottom:100rpx;color: red;">
                       <text class="symbol">
                         {{item.applyType==1?'仅退款':'退货退款'}}
                       </text>
                      </text>
                    </view>
                    <view class="price-nums">
                     <text class="prodcount" style="">
                        退款数量：x{{ item.goodsNum }}
                      </text>
                      <text class="prodprice" style="color:red;">
                         退款金额：￥{{ item.refundAmount}}
                       </text>
                    </view>
                    <view class="price-nums">
                      <text class="prodprice" style="bottom: 50rpx;">
                        <text class="symbol">
                          ￥{{item.orderAmount}}
                        </text>
                      </text>
                      <text class="prodcount" style="bottom: 50rpx;">
                        x{{ item.prodCount }}
                      </text>
                    </view>
                  </view>
                </view>
        </view>
      </block>
    </view>
  </view>
  <!-- end 订单列表 -->
</template>

<script setup>
const wxs = number()
const list = ref([])
const sts = ref(0)
/**
 * 生命周期函数--监听页面加载
 */
onLoad((options) => {
 loadOrderData(0, 1)
})

const current = ref(1)
const pages = ref(0)
/**
 * 页面上拉触底事件的处理函数
 */
onReachBottom(() => {
  if (current.value < pages.value) {
    loadOrderData(sts.value, current.value + 1)
  }
})


/**
 * 加载订单数据
 */
const loadOrderData = (sts, currentParam) => {
  uni.showLoading() // 加载订单列表
  http.request({
    url: '/p/orderRefund/page',
    method: 'GET',
    data: {
      current: currentParam,
      size: 10,
      returnMoneySts: sts
    }
  })
    .then(({ data }) => {
      let listParam = []
      if (data.current === 1) {
        listParam = data.records
      } else {
        listParam = list.value
        Array.prototype.push.apply(listParam, data.records)
      }
      list.value = listParam
      pages.value = data.pages
      current.value = data.current
      console.log(list.value)
      uni.hideLoading()
    })
}

/**
 * 状态点击事件
 */
const onStsTap = (e) => {
  sts.value = e.currentTarget.dataset.sts
  loadOrderData(sts.value, 1)
}
const onReturn = (e) =>{
  uni.navigateTo({
    url: '/pages/returnOrder/returnOrder?orderNum='+e.currentTarget.dataset.ordernum
  })
}
/**
 * 查看物流
 */
const toDeliveryPage = (e) => {
  uni.navigateTo({
    url: '/pages/express-delivery/express-delivery?orderNum=' + e.currentTarget.dataset.ordernum
  })
}

/**
 * 取消订单
 */
const onCancelOrder = (e) => {
  const ordernum = e.currentTarget.dataset.ordernum
  uni.showModal({
    title: '',
    content: '要取消此订单？',
    confirmColor: '#3e62ad',
    cancelColor: '#3e62ad',
    cancelText: '否',
    confirmText: '是',

    success (res) {
      if (res.confirm) {
        uni.showLoading({
          mask: true
        })
        http.request({
          url: '/p/myOrder/cancel/' + ordernum,
          method: 'PUT',
          data: {}
        })
          .then(() => {
            loadOrderData(sts.value, 1)
            uni.hideLoading()
          })
      }
    }
  })
}

/**
 * 模拟支付，直接提交成功
 * @param e
 */
const normalPay = (e) => {
  uni.showLoading({
    mask: true
  })
  wx.login({
    success(res){
      if(res.code){
        http.request({
          url: '/p/order/normalPay',
          method: 'POST',
          data: {
            orderNumbers:e.currentTarget.dataset.ordernum,
            payType:1,
            code:res.code
          }
        })
          .then(({ data }) => {
            uni.hideLoading()
            console.log(data)
            if (data) {
              wx.requestOrderPayment({
                timeStamp:data.data.timeStamp,
                nonceStr: data.data.nonceStr,
                package: data.data.package,
                paySign:  data.data.paySign,
                signType:data.data.signType,
                success(res){
                  uni.showToast({
                    title: '支付成功',
                    icon: 'none'
                  })
                  setTimeout(() => {
                    uni.navigateTo({
                      url: '/pages/pay-result/pay-result?sts=1&orderNumbers=' + e.currentTarget.dataset.ordernum
                    })
                  }, 1200)
                }
              })
            } else {
              uni.showToast({
                title: '支付失败！',
                icon: 'none'
              })
            }
          })
      }
    }
  })
}

/**
 * 查看订单详情
 */
const toOrderDetailPage = (e) => {
  uni.navigateTo({
    url: '/pages/order-detail/order-detail?orderNum=' + e.currentTarget.dataset.ordernum
  })
}

/**
 * 确认收货
 */
const onConfirmReceive = (e) => {
  uni.showModal({
    title: '',
    content: '我已收到货？',
    confirmColor: '#eb2444',

    success (res) {
      if (res.confirm) {
        uni.showLoading({
          mask: true
        })
        http.request({
          url: '/p/myOrder/receipt/' + e.currentTarget.dataset.ordernum,
          method: 'PUT'
        })
          .then(() => {
            loadOrderData(sts.value, 1)
            uni.hideLoading()
          })
      }
    }
  })
}

/**
 * 删除已完成||已取消的订单
 * @param e
 */
const delOrderList = (e) => {
  uni.showModal({
    title: '',
    content: '确定要删除此订单吗？',
    confirmColor: '#eb2444',

    success (res) {
      if (res.confirm) {
        const ordernum = e.currentTarget.dataset.ordernum
        uni.showLoading()

        http.request({
          url: '/p/myOrder/' + ordernum,
          method: 'DELETE'
        })
          .then(() => {
            loadOrderData(sts.value, 1)
            uni.hideLoading()
          })
      }
    }
  })
}

</script>

<style scoped lang="scss">
@use './orderList.scss';
.order-tit text{
  width: 150rpx;
}
</style>
